<template>
  <div class="pos">
    <!--<h1>hello vue-pos.</h1>-->
    <!--定义行-->
    <el-row>
      <!--定义两列布局-->
      <el-col :span="7" class="pos-order" id="order-list">
        <!--左侧tab栏-->
        <el-tabs>
          <el-tab-pane label="点餐">
            <el-table :data="tableData" border show-summary style="width:100%">
              <el-table-column prop="goodsName" label="商品"></el-table-column>
              <el-table-column prop="count" label="数量" width="60"></el-table-column>
              <el-table-column prop="price" label="金额" width="60"></el-table-column>
              <el-table-column label="操作" width="100" fixed="right">
                <template slot-scope="scope">
                  <el-button type="text" size="small" @click="delSingleGoods(scope.row)">删除</el-button>
                  <el-button type="text" size="small" @click="addOrderList (scope.row)">增加</el-button>
                </template>
              </el-table-column>
            </el-table>
            <div class="div-btn">
              <el-button type="danger" size="small" @click="dellAllGoods">删除</el-button>
              <el-button type="warning" size="small">挂单</el-button>
              <el-button type="success" size="small" @click="checkout">结账</el-button>
            </div>
          </el-tab-pane>
          <el-tab-pane label="挂单">挂单</el-tab-pane>
          <el-tab-pane label="外卖">外卖</el-tab-pane>
        </el-tabs>
      </el-col>
      <el-col :span="17">
        <div class="hot-goods">
          <div class="title">热卖商品</div>
          <div class="hot-goods-list">
            <ul>
              <li v-for="goods in hotGoods" @click="addOrderList (goods)">
                <span>{{goods.goodsName}}</span>
                <span class="h-price">￥{{goods.price}}元</span>
              </li>
            </ul>
          </div>
        </div>
        <div class="goods-type">
          <el-tabs>
            <el-tab-pane label="汉堡">
              <div class="cook-list">
                <ul>
                  <li v-for="goods in hamburgerGoods" @click="addOrderList (goods)">
                      <span class="foodImg">
                        <img :src="goods.goodsImg" width="100%">
                      </span>
                    <span class="foodName">{{goods.goodsName}}</span>
                    <span class="foodPrice">￥{{goods.price}}元</span>
                  </li>
                </ul>
              </div>
            </el-tab-pane>
            <el-tab-pane label="小食">
              <div class="cook-list">
                <ul>
                  <li v-for="goods in smallGoods" @click="addOrderList (goods)">
                      <span class="foodImg">
                        <img :src="goods.goodsImg" width="100%">
                      </span>
                    <span class="foodName">{{goods.goodsName}}</span>
                    <span class="foodPrice">￥{{goods.price}}元</span>
                  </li>
                </ul>
              </div>
            </el-tab-pane>
            <el-tab-pane label="饮料">
              <div class="cook-list">
                <ul>
                  <li v-for="goods in drinkGoods" @click="addOrderList (goods)">
                      <span class="foodImg">
                        <img :src="goods.goodsImg" width="100%">
                      </span>
                    <span class="foodName">{{goods.goodsName}}</span>
                    <span class="foodPrice">￥{{goods.price}}元</span>
                  </li>
                </ul>
              </div>
            </el-tab-pane>
            <el-tab-pane label="套餐">
              <div class="cook-list">
                <ul>
                  <li v-for="goods in packageGoods" @click="addOrderList (goods)">
                      <span class="foodImg">
                        <img :src="goods.goodsImg" width="100%">
                      </span>
                    <span class="foodName">{{goods.goodsName}}</span>
                    <span class="foodPrice">￥{{goods.price}}元</span>
                  </li>
                </ul>
              </div>
            </el-tab-pane>
          </el-tabs>

        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
  //导入axios服务
  import axios from 'axios'

  export default {
    name: 'pos',
    mounted () {
      //使用原生js方法，将订单栏高度调整为100%
      var height = document.body.clientHeight
      document.getElementById('order-list').style.height = height + 'px'
    },
    created () {
      axios.get('http://jspang.com/DemoApi/oftenGoods.php')
        .then(response => {
          this.hotGoods = response.data
        })
        .catch(error => {
          alert('网络错误，不能访问!')
        })
      //读取分类商品列表
      axios.get('http://jspang.com/DemoApi/typeGoods.php')
        .then(response => {
          this.hamburgerGoods = response.data[0]
          this.smallGoods = response.data[1]
          this.drinkGoods = response.data[2]
          this.packageGoods = response.data[3]

        })
        .catch(error => {
          console.log(error)
          alert('网络错误，不能访问')
        })
    },
    data () {
      return {
        tableData: [],
        hotGoods: [],
        hamburgerGoods: [],
        smallGoods: [],
        drinkGoods: [],
        packageGoods: [],
        totalCount: 0,
        totalMoney: 0
      }
    },
    methods: {
      addOrderList (goods) {
        //添加前初始值
        this.totalCount = 0
        this.totalMoney = 0
        let isHave = false
        for (let i = 0; i < this.tableData.length; i++) {
          if(this.tableData[i].goodsId == goods.goodsId) {
            isHave=true
          }
        }
        if(isHave) {
          //获取当前商品数据,并且数量增加1
          let arr = this.tableData.filter(o=>o.goodsId==goods.goodsId)
          arr[0].count++;
          arr[0].price+=goods.price;
        }else {
          //构造新的商品数组
          let newGoods = {
            goodsId:goods.goodsId,
            goodsName:goods.goodsName,
            price:goods.price,
            count:1
          }
          this.tableData.push(newGoods)
        }
        this.getAllMoney()
        //统计数据
        // this.tableData.forEach((element=>{
        //   this.totalCount +=element.count;
        //   this.totalMoney = this.totalMoney+element.price * element.count;
        // }))
      },
      delSingleGoods(goods){
        this.tableData=this.tableData.filter(o => o.goodsId != goods.goodsId)
        this.getAllMoney()
      },
      dellAllGoods(){
        this.tableData=[]
        this.totalCount = 0;
        this.totalMoney = 0;
      },
      //汇总数量和金额
      getAllMoney () {
        this.totalCount = 0;
        this.totalMoney = 0;
        if (this.tableData) {
          this.tableData.forEach((element) => {
            this.totalCount += element.count;
            this.totalMoney = this.totalMoney + element.price ;
          });
        }
        console.log(this.totalCount)
        console.log(this.totalMoney)
      },
      checkout () {
        if (this.totalCount != 0) {
          this.tableData = [];
          this.totalCount = 0;
          this.totalMoney = 0;
          this.$message({
            message: '结账成功，感谢你又为店里出了一份力!',
            type: 'success'
          });

        } else {
          this.$message.error('不能空结。老板了解你急切的心情！');
        }

      }
    }
  }
</script>

<style scoped>
  .pos-order {
    background: #F9FAFC;
    border-right: 1px solid #C0CCDA;
  }

  .div-btn {
    margin-top: 10px;
  }

  .title {
    height: 20px;
    border-bottom: 1px solid #D3DCE6;
    background-color: #F9FAFC;
    padding: 10px;
    text-align: left;
  }

  .hot-goods-list ul li {
    list-style: none;
    float: left;
    border: 1px solid #E5E9F2;
    padding: 10px;
    margin: 5px;
    background-color: #fff;
  }

  .h-price {
    color: #58B7FF;
  }

  .goods-type {
    clear: both;
    margin-left: 5px;
  }

  .cook-list li {
    list-style: none;
    width: 23%;
    border: 1px solid #E5E9F2;
    height: auto;
    overflow: hidden;
    background-color: #fff;
    padding: 2px;
    float: left;
    margin: 2px;
    cursor: pointer;

  }

  .cook-list li span {

    display: block;
    float: left;
  }

  .foodImg {
    width: 40%;
  }

  .foodName {
    font-size: 18px;
    padding-left: 10px;
    color: brown;

  }

  .foodPrice {
    font-size: 16px;
    padding-left: 10px;
    padding-top: 10px;
  }
</style>
